<template>
  <div class="content">
    <button @click="add">add</button>
    <button @click="pop">pop</button>
    <div class="wraps">
      <!-- transition-group适用于对多个数据进行添加动画 如数组渲染删除 tag 会帮你包一层结构 不写不包  （html标签名） 均可-->
      <transition-group appear enter-active-class="animate__animated animate__fadeInUpBig"
        leave-active-class="animate__animated animate__fadeOutDown">
        <div class="item" :key="item" v-for="(item, i) in list">{{ item }}</div>
      </transition-group>
    </div>
    <button @click="random">random</button>
    <transition-group move-class="mmm" class="wrapss" tag="div">
      <div class="items" v-for="(item, i) in arrList" :key="item.id">
        <el-image style="width: 100px; height: 100px"
          :src="`https://api.btstu.cn/sjbz/api.php?lx=dongman&format=images&${_.random(1000, 5999)}`"
          :preview-src-list="[`https://api.btstu.cn/sjbz/api.php?lx=dongman&format=images&${i}`]" :initial-index="4"
          fit="cover">
          <template #placeholder>
            <div class="loading">
              <el-icon class="is-loading" :size="20" color="#ccc">
                <Loading />
              </el-icon>
              加载中
            </div>
          </template>
        </el-image>
      </div>
    </transition-group>
  </div>
</template>
<script setup lang='ts'>
import 'animate.css'
import _ from 'lodash'
import { ref, reactive, onMounted } from "vue"
const list = reactive<number[]>([1, 2, 3, 4, 5, 6])
const add = () => {
  list.push(list.length + 1)
}
const random = () => {
  arrList.value = _.shuffle(arrList.value)
}
const pop = () => {
  list.pop()
}
// onMounted(() => {
// setInterval(()=>{
// random()
// },1000)
// })
let arrList = ref(Array.apply(null, { length: 81 } as number[]).map((_, index) => {
  return {
    id: index,
    number: (index % 9) + 1
  }
}))
</script>
<style scoped lang='less'>
.mmm {
  transition: all 1s;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.wrapss {
  display: flex;
  flex-wrap: wrap;
  width: calc(100px * 10 + 9px);

  .items {
    width: 100px;
    height: 100px;
    border: solid 1px #ccc;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 100%;
    }
  }
}

.wraps {
  display: flex;
  flex-wrap: wrap;
  word-break: break-all;
  border: 1px solid #ccc;

  .item {
    font-size: 40px;
    margin: 10px;
  }
}
</style>